<template>
	<view class="content">
		<p class="title">购物车</p>
		<view class="editBox">
			<view class="commoditynum">
				共{{commoditynum}}件商品
			</view>
			<up-button color="#F5F5F5" @click="edit" :text="btnedittext" shape="circle"></up-button>
		</view>
		<My-shopcar @myEvent="add" @sizechange="sizechange" :Refreshdata='Refreshdata'
			:btnedittext="btnedittext"></My-shopcar>
		<up-popup :round="20" mode="bottom" :show="show" @close="close" @open="open">
			<view class="popcontent">
				<view class="popheader">
					<p class="pop-title">修改选择</p>
					<image @click="popshow" :src="proxy.serverimageUrl + 'ProductDetails/close.png'" mode=""></image>
				</view>
				<view class="SelectStudent">
					<view class="title">
						<view class="">
							需选一位学生
						</view>
						<!-- <view class="btnbox">
							<up-button @click="addstudent" size="small" type="default" text="新增
							"></up-button>
						</view> -->

					</view>
					<scroll-view scroll-x="true" class="scroll-view_x">
						<view class="student-item" @click="stactive(item,index)"
							:class="[studentactie == index ? 'student-active' : '']" v-for="(item,index) in studentdata"
							:key="index">
							<view class="Name">
								{{item.sname}}
							</view>
							<view class="detailclass">
								{{item.className}}
							</view>
							<image v-if="studentactie == index" class="selectedimg"
								:src="proxy.serverimageUrl + 'ProductDetails/Selected.png'" mode=""></image>
						</view>
					</scroll-view>

					<view class="student-detail">
						<view class="left-box">
							<p class="name-text">{{studentobj.sname}}</p>
							<p class="p2">
								<span>{{studentobj.birthday}}</span>
								&nbsp;&nbsp;
								<span>{{studentobj.sex == 1 ? '男' : '女'}}</span>
								&nbsp;&nbsp;
								<span>{{studentobj.park}}</span>
							</p>
							<p class="p2">
								身高体重：{{studentobj.height}}cm、{{studentobj.weight}}kg
							</p>
						</view>
						<!-- <view class="kong-line">
		
						</view> -->
						<!-- <image @click="editstudent" src="../../static/AddressManagement/edit.png" mode=""></image> -->
					</view>
					<!-- 空盒子样式  横线 -->
					<view class="line">

					</view>
					<view class="sizeBox" v-if="Commodity && Commodity.length > 0">
						<view class="sizeBox-left">
							尺码
						</view>
						<view class="sizeBox-right">
							<view class="textbox">
								<span class="span1">已选 </span>
								<span class="span2"> {{sizenum}}</span>
							</view>
							<!-- <image src="../../static/ProductDetails/rightarrow.png" mode=""></image> -->
						</view>

					</view>
					<scroll-view class="siezbtnBox" v-if="Commodity && Commodity.length > 0" :scroll-into-view="toView"
						scroll-x="true">
						<view class="btn" :id="'g' + item.gid"
							:class="[studentimg == item.gid && studentp == 0 ? 'btnactive' : sizebtnindex ==index && (studentp == 1 || studentp == 3) ? 'btnactive-y' : sizebtnindex == index && (studentp == 2 || studentp == 4) ? 'btnactive-r':sizebtnindex == index && studentp == 5 ? 'btnactive':'' ]"
							@click="changesize(item,index)" v-for="(item,index) in Commodity" :key="item.gid">
							{{item.specificationsSize}}
							<image v-if="studentimg == item.gid && studentp == 0" class="recomimg"
								:src="proxy.serverimageUrl + 'ProductDetails/recommend.png'" mode=""></image>
							<image v-if="studentimg == item.gid && studentp != 0 && studentp != 5" class="recomimg"
								:src="proxy.serverimageUrl + 'ProductDetails/recommeneds.png'" mode=""></image>

						</view>
					</scroll-view>
					<view class="" v-if="Commodity && Commodity.length > 0">
						<p class="sizetext" v-if="studentp == 0">推荐尺码是根据身高体重计算得来</p>
						<p class="sizetext" v-if="studentp == 1">根据计算，该尺码可能<span style="color:#DEB34A">偏小</span>了</p>
						<p class="sizetext" v-if="studentp == 2">根据计算，该尺码可能<span style="color:#FE4647">太小</span>了</p>
						<p class="sizetext" v-if="studentp == 3">根据计算，该尺码可能<span style="color:#DEB34A">偏大</span>了</p>
						<p class="sizetext" v-if="studentp == 4">根据计算，该尺码可能<span style="color:#FE4647">太大</span>了</p>
						<p class="sizetext" v-if="studentp == 5">暂无推荐尺码</p>
					</view>

				</view>
				<view class="btnbox">
					<view class="">
						<up-button color="#303030" @click="close" text="取消"></up-button>
					</view>
					<view class="">
						<up-button color="#013CAA" @click="submitsize" text="确定"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import MyShopcar from '../../components/shopCar.vue'
	import {
		updateShoppingCart,
		queryStudentSpecifications
	} from '@/utils/api.js'
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const commoditynum = ref(0)
	const btnedittext = ref('编辑')
	const add = (num) => {
		commoditynum.value = num
		if (num == 0) {
			btnedittext.value = '编辑'
		}
	}

	/*弹窗组件控制*/
	const show = ref(false)
	/*学生弹框弹框关闭事件*/
	const close = () => {
		show.value = false
		studentobj.value = {}
		studentdata.value = []
		Commodity.value = []
	}
	const popshow = () => {
		close()
	}
	/**选择学生后判断滑动到指定尺码*/
	const toviewnum = () => {
		Commodity.value.map(item => {
			if (studentimg.value == item.gid) {
				toView.value = 'g' + item.gid
			}
		})
	}
	const open = () => {
		show.value = true;

	}
	/*编辑购物车商品*/
	// const btnedittext = ref('编辑')
	const edit = () => {
		// btnedittext.value = '退出编辑'
		if (btnedittext.value == '编辑') {
			btnedittext.value = '退出编辑'
		} else {
			btnedittext.value = '编辑'
		}
	}
	const Refreshdata = ref('no')
	const submitsize = () => {
		let params = {
			cid: commoditydata.value.cid,
			number: commoditydata.value.number,
			openId: uni.getStorageSync('openid'),
			scid: commoditydata.value.scid,
			specificationsSize: sizenum.value,
			stid: studentobj.value.stid
		}
		updateShoppingCart(params).then(res => {
			if (res.code == 200) {
				Refreshdata.value = Math.floor(new Date().getTime() % 100000);
				setTimeout(() => {
					uni.showToast({
						title: '修改成功',
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.hideToast();
						close()
					}, 1000)
				}, 0)
			}
		})
	}
	/*选择尺码后按钮样式切换， 用于判断当前选择的按钮index*/
	const sizebtnindex = ref(null)
	/*点击选择尺码显示*/
	const sizenum = ref('')
	/*推荐尺码文字显示*/
	const studentp = ref('')
	/*单个学生信息*/
	const studentobj = ref({})
	/*推荐图片显示*/
	const studentimg = ref('')
	const studentactie = ref(0)
	/*选择学生后定位到推荐尺码变量*/
	const toView = ref('')
	const studentdata = ref([])
	const Commodity = ref([])
	const commoditydata = ref({})
	const sizechange = (datas) => {
		commoditydata.value = JSON.parse(datas)
		console.log(commoditydata.value);
		queryStudentSpecifications(commoditydata.value.scid).then(res => {
			console.log(res);
			if (res.code == 200) {
				studentdata.value = res.data.list
				Commodity.value = res.data.slist
				res.data.list.map((item, index) => {
					console.log(item.stid);
					console.log(commoditydata.value.stid);
					if (item.stid == commoditydata.value.stid) {
						heianwienum(item)
						studentactie.value = index
						studentobj.value = item
					}
				})
				open()
			}

		})
	}
	/*用于切换学生时样式的切换*/
	const stactive = (item, index) => {
		studentactie.value = index
		studentobj.value = item
		studentobj.value = item
		heianwienum(item)
		setTimeout(() => {
			toviewnum()
		}, 100)
	}
	/*点击尺码事件*/
	const changesize = (item, index) => {
		sizeNum.value = null
		sizenum.value = item.specificationsSize
		sizebtnindex.value = index
		let sdata = studentobj.value
		let Sizearr1 = item.specificationsSize.split('#')
		heianwienum(studentobj.value)
		if (sizeNum.value) {
			let Sizearr2 = sizeNum.value.split('#')
			if (Sizearr2[0] - Sizearr1[0] == 10) {
				studentp.value = 1
			} else if (Sizearr2[0] - Sizearr1[0] >= 20) {
				studentp.value = 2
			} else if (Sizearr1[0] - Sizearr2[0] == 10) {
				studentp.value = 3
			} else if (Sizearr1[0] - Sizearr2[0] >= 10) {
				studentp.value = 4
			} else if (Sizearr2[0] == Sizearr1[0]) {
				studentp.value = 0
			} else {
				studentp.value = 5
			}
		} else {
			studentp.value = 5
			sizebtnindex.value = index
		}
	}
	const sizeNum = ref(null)
	/*计算身高体重推荐尺码方法*/
	const heianwienum = (item) => {
		let sdata = item
		Commodity.value.some(item => {
			if (sdata.height > item.startHeight && sdata.weight > item.startWeight && sdata.weight < item
				.endWeight && sdata.height < item.endHeight) {
				studentp.value = 0
				studentimg.value = item.gid
				//保存推荐的尺码
				sizeNum.value = item.specificationsSize
				//显示已选的尺码
				sizenum.value = item.specificationsSize
				return true
			} else {
				sizebtnindex.value = 0
				studentp.value = 5
			}
		})
		toviewnum()

	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;
		height: 100vh;
		padding: 117rpx 0rpx 0;

		.title {
			font-family: SourceHanSansSC;
			font-weight: 400;
			font-size: 30rpx;
			text-align: center;
			color: #303030;
			line-height: 40rpx;
		}

		.editBox {
			display: flex;
			margin-top: 70rpx;
			padding: 0 30rpx;
			align-items: center;
			justify-content: space-between;

			.commoditynum {
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 26rpx;
				color: #636363;
				line-height: 40rpx;
			}

			::v-deep .u-button {
				// width:110rpx !important;
				min-width: 110rpx !important;
				max-width: 200rpx !important;
				height: 54rpx !important;
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 26rpx;
				color: #636363 !important;
				margin: 0;
			}
		}

		.scrollView {
			margin-top: 36rpx;
			padding-top: 36rpx;
		}

		::v-deep .u-popup__content {
			padding: 40rpx 0;
			background: #F2F2F2;

			.popcontent {
				padding: 0 30rpx;

				.popheader {

					text-align: center;
					position: relative;

					.pop-title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #303030;
						line-height: 40px;
					}

					image {
						position: absolute;
						top: 4rpx;
						right: 30rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}

				.SelectStudent {
					margin-top: 30rpx;
					width: 690rpx;
					// height: 335rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 36rpx;

					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						height: 40rpx;
						color: #303030;

						.btnbox {
							width: 150rpx;
						}
					}

					.scroll-view_x {
						width: 620rpx;
						height: 100rpx;
						margin-top: 30rpx;
						white-space: nowrap;

						.student-item {
							display: inline-block;
							width: 190rpx;
							height: 100rpx;
							margin-right: 20rpx;
							background: #F8F8F8;
							border-radius: 8rpx;
							border: 1rpx solid #EEEEEE;
							text-align: center;
							padding-top: 22rpx;
							position: relative;

							.Name {
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #303030;
								line-height: 26rpx;
							}

							.detailclass {
								margin-top: 8rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #989898;
								line-height: 24rpx;
							}

							.selectedimg {
								width: 43rpx;
								height: 42rpx;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}


						.student-active {
							background: #EDF3FF;
							border-radius: 8rpx;
							border: 1rpx solid #013CAA;
						}

					}



					.student-detail {
						margin-top: 26rpx;
						width: 100%;
						border-radius: 8rpx;
						padding: 35rpx;
						background-color: #F7F7F7;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-box {
							.name-text {
								font-family: Source Han Sans SC;
								font-weight: 500;
								font-size: 30rpx;
								color: #303030;
								line-height: 30rpx;
							}

							.p2 {
								margin-top: 22rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #989898;
								line-height: 24rpx;
							}
						}

						.kong-line {
							width: 1rpx;
							height: 45rpx;
							background: #DFDFDF;
						}

						image {
							width: 25rpx;
							height: 26rpx;
						}
					}

					.line {
						margin-top: 30rpx;
						width: 618rpx;
						height: 1rpx;
						background: #EEEEEE;
					}

					.sizeBox {
						margin-top: 36rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.sizeBox-left {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #303030;
							line-height: 40rpx;
						}

						.sizeBox-right {
							display: flex;
							align-items: center;

							.textbox {


								.span1 {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #303030;
								}

								.span2 {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #013CAA;
								}
							}

							image {
								margin-left: 25rpx;
								width: 13rpx;
								height: 24rpx;
							}
						}
					}





					.siezbtnBox {
						width: 620rpx;
						height: 100rpx;
						margin-top: 20rpx;
						white-space: nowrap;

						.btn {
							display: inline-block;
							width: 210rpx;
							height: 100rpx;
							// background: #F8F8F8;
							text-align: center;
							line-height: 100rpx;
							margin-right: 10rpx;
							border-radius: 8rpx;
							border: 1rpx solid #EEEEEE;
							position: relative;

							.recomimg {
								width: 70rpx;
								height: 32rpx;
								position: absolute;
								right: 0;
								top: 0;
							}
						}

						.btnactive {
							background: #EDF3FF;
							border-radius: 8rpx;
							border: 1rpx solid #013CAA;
						}

						.btnactive-y {
							background: #FFF9E6;
							border-radius: 8rpx;
							color: #DEB34A;
							border: 1rpx solid #F6CD61;
						}

						.btnactive-r {
							color: #FE3A3B;
							background: #FDEDED;
							border-radius: 8rpx;
							border: 1rpx solid #F45048;
						}
					}

					.sizetext {
						margin-top: 20rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989898;
					}


				}

				.btnbox {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						width: 320rpx;
						height: 92rpx;
					}
				}
			}

		}
	}
</style>